<template>
  <div>
    <div class="py-1 px-1 bg-white d-scroll listInner">
      <custom-title :is-line="true" title="基本信息" />
      <van-image
        width="100"
        height="100"
        :src="imgSrc"
      >
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
      <div class="baseInfo">
        <div v-for="(item, index) in descList" :key="index">
          <custom-details-item v-if="!item.type || item.type ===active" one-color :label="item.label" :value="item.value + ''" />
        </div>
      </div>
      <template>
        <custom-title :is-line="true" title="证书信息" />
        <div class="common_list" style="padding: 0">
          <template v-if="listData && listData.length>0">
            <div v-for="(item, index) in listData" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">{{ item.certifyName }}</div>
                  <ul>
                    <li>
                      <i class="iconfont c-text-color1">&#xe725;</i>
                      <div class="label">证书种类：</div>
                      <div class="value">{{ item.certifyCategoryName }}</div>
                    </li>

                    <li>
                      <i class="iconfont c-text-color2">&#xe634;</i>
                      <div class="label">证书等级：</div>
                      <div class="value">{{ item.certifyLevelName }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color3">&#xe664;</i>
                      <div class="label">专业：</div>
                      <div class="value">{{ item.speciality }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color4">&#xe612;</i>
                      <div class="label">证书初领日期：</div>
                      <div class="value">{{ item.receiveTime }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color5">&#xe6bb;</i>
                      <div class="label">证书有效期（起）：</div>
                      <div class="value">{{ item.certifyStarTime }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color6">&#xe6bb;</i>
                      <div class="label">证书有效期（止）：</div>
                      <div class="value">{{ item.certifyEndTime }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color7">&#xe677;</i>
                      <div class="label">证书附件：</div>
                      <div class="value">
                        <el-link type="primary" @click="openAttachPopUp(item.shareAttachVos)">
                          查看
                        </el-link>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else />
        </div>
        <template v-if="active === '能源管理人员'">
          <custom-title :is-line="true" title="培训记录" />
          <div class="common_list" style="padding: 0">
            <template v-if="trainList && trainList.length>0">
              <div v-for="(item, index) in trainList" :key="index" class="list_item">
                <div class="content_area">
                  <div class="number_order">{{ index + 1 }}</div>
                  <div class="right_content">
                    <div class="content_title" style="max-width: 100%">{{ item.year }}</div>
                    <ul>
                      <li>
                        <i class="iconfont c-text-color1">&#xe725;</i>
                        <div class="label">企业名称：</div>
                        <div class="value">{{ item.companyName }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color2">&#xe634;</i>
                        <div class="label">培训类别：</div>
                        <div class="value">{{ item.trainType }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color3">&#xe700;</i>
                        <div class="label">培训对象：</div>
                        <div class="value">{{ item.trainObject }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color4">&#xe685;</i>
                        <div class="label">培训时间：</div>
                        <div class="value">{{ item.trainTime }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color5">&#xe685;</i>
                        <div class="label">培训学时（h）：</div>
                        <div class="value">{{ item.trainHour }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color6">&#xe6f7;</i>
                        <div class="label">培训级别：</div>
                        <div class="value">{{ item.trainLevel }}</div>
                      </li>
                      <li>
                        <i class="iconfont c-text-color7">&#xe626;</i>
                        <div class="label">考核通过率（%）：</div>
                        <div class="value">{{ item.testPass }}</div>
                      </li>
                      <!--如果继续增加则颜色再次从1到7循环，下一行的class为c-text-color1-->
                    </ul>
                  </div>
                </div>
              </div>
            </template>
            <el-empty v-else />
          </div>
        </template>
      </template>
    </div>
    <attachPopUp ref="attachPopUp" />
  </div>
</template>

<script>
import { getNyManagerTrainInfo, NyExpertInfo, NyManagerInfo } from '@/api/commonPage/personnel'
import commonList from '@/assets/mixin/commonList'

export default {
  name: 'BasicComponent',
  inject: ['layout'],
  mixins: [commonList],
  data() {
    return {
      companyName: '',
      active: '',
      current: '',
      id: '',
      descList: [
        { label: '姓名', value: '', fieldName: 'userName|managerName' },
        { label: '属性类别', value: '', fieldName: 'expertAttributeList', type: '专家库' },
        { label: '专业类别', value: '', fieldName: 'professionTypeName', type: '专家库' },
        { label: '性别', value: '', fieldName: 'sexName' },
        { label: '出生日期', value: '', fieldName: 'birthTime' },
        { label: '年龄', value: '', fieldName: 'age' },
        { label: '联系电话', value: '', fieldName: 'phone' },
        { label: '学历', value: '', fieldName: 'educationLevelName' },
        { label: '所学专业', value: '', fieldName: 'specialityType', type: '能源管理人员' },
        { label: '职称', value: '', fieldName: 'jobTitleName' },
        { label: '职务', value: '', fieldName: 'job' },
        { label: '工作单位', value: '', fieldName: 'workUnit' },
        { label: '开始从事能源相关工作时间', value: '', fieldName: 'workYear' },
        { label: '从事能源相关工作年限', value: '', fieldName: 'workLife' },
        { label: '专职/兼职', value: '', fieldName: 'partFullName', type: '能源管理人员' },
        { label: '管理人员分类', value: '', fieldName: 'managerTypeName', type: '能源管理人员' },
        { label: '注册能源工程师证书', value: '', fieldName: 'isSafetyCertifyName', type: '能源管理人员' },
        { label: '毕业院校', value: '', fieldName: 'graduateSchool', type: '能源管理人员' },
        { label: '年度培训学时要求', value: '', fieldName: 'annualTrainRequire', type: '能源管理人员' },
        { label: '是否加入专家库', value: '', fieldName: 'isExpert', type: '能源管理人员' }
      ],
      listData: [],
      trainList: [],
      imgSrc: ''
    }
  },
  created() {
    const { current, id, active } = this.$route.query
    this.id = id || ''
    this.current = current || ''
    this.active = active || ''
  },
  async mounted() {
    // this.layout.showLoading()
    // this.active === '能源管理人员' ? await this.Manager() : await this.Expert()

    this.layout.showLoading()
    if (this.active === '能源管理人员') {
      this.Manager()
      this.getNyManagerTrainInfo()
    } else {
      this.Expert()
    }
    // this.layout.hideLoading()
  },
  methods: {
    async Expert() {
      this.layout.showAreaLoading(['.baseInfo'])
      const { data, status } = await NyExpertInfo({ expertId: this.id })
      if (status === 0 && data) {
        this.descList.forEach(v => {
          if (v.fieldName.includes('|')) {
            const fieldNameArr = v.fieldName.split('|')
            for (const fieldName of fieldNameArr) {
              if (!v.value) {
                v.value = data[fieldName] !== undefined ? data[fieldName] : v.value
              }
            }
          } else {
            v.value = data[v.fieldName.split('|')[0]] ? data[v.fieldName] : v.value
            if (v.fieldName === 'expertAttributeList') {
              v.value = data[v.fieldName] !== undefined ? data[v.fieldName].map(val => val.expertattributename).join(',') : v.value
            }
          }
        })
        this.listData = data.certifyList
        this.imgSrc = data.fileUUId
      }
      this.layout.hideAreaLoading(['.baseInfo'])
    },
    async Manager() {
      this.layout.showAreaLoading(['.baseInfo'])
      const { data, status } = await NyManagerInfo({ managerId: this.id })
      if (status === 0 && data) {
        this.descList.forEach(v => {
          if (v.fieldName.includes('|')) {
            const fieldNameArr = v.fieldName.split('|')
            for (const fieldName of fieldNameArr) {
              if (!v.value) {
                v.value = data[fieldName] !== undefined ? data[fieldName] : v.value
              }
            }
          } else { v.value = data[v.fieldName.split('|')[0]] !== undefined ? data[v.fieldName] : v.value }
        })
        this.listData = data.certifyList
        this.imgSrc = data.fileUUId
        // this.trainList = data.trainList
      }
      this.layout.hideAreaLoading(['.baseInfo'])
    },
    async getNyManagerTrainInfo() {
      // this.$refs.customLoadMore.loadStatus = true
      const Info = {
        pageNum: 1,
        pageSize: 10000,
        managerId: this.id,
        trainLevel: '',
        trainObject: '',
        trainType: ''
      }
      const hbRes = await getNyManagerTrainInfo(Info)
      if (hbRes.status === 0) {
        this.trainList = this.trainList.concat(hbRes.data.list)
        this.form.pages = hbRes.data.pages
      }
      // this.$refs.customLoadMore.loadStatus = false
    }
  }
}
</script>

<style lang="scss" scoped>
.olMap {
  width: 100%;
  height: 350px;
}
</style>
